<!DOCTYPE html>
<html>
<head>
	<title>列表</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
	<script>
		window.onload = function(){
			getRem(720,100)
		};
		window.onresize = function(){
			getRem(720,100)
		};
		function getRem(pwidth,prem){
			var html = document.getElementsByTagName("html")[0];
			var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
			html.style.fontSize = oWidth/pwidth*prem + "px";
		}
	</script>
	<style type="text/css">
		.flex{
			display: -webkit-box;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
		}
		.list{
			width: 25%;
			margin: 0 auto;
			height: 47px;
			-webkit-box-align: center;
			-webkit-align-items: center;
			-ms-flex-align: center;
			align-items: center;
			-webkit-box-pack: justify;
			-webkit-justify-content: space-between;
			-ms-flex-pack: justify;
			justify-content: space-between;
			border-bottom: 1px solid #EEEEEE;
			color: #99999a;
			font-size: 13px;
		}
		.main{
			padding: 0 20px;
		}
		.main-button-cancel{
			background-color: red;
		}
		.main-button-confirm{
			background-color: blue;
		}
		.main-button{
			width: 25%;
			margin: 0 auto;
			justify-content: space-between;
			margin-top:  0.2rem;
		}
		.main-button div{
			width: 35%;
			height: 0.15rem;
			border-radius: 0.2rem;
			line-height: 0.15rem;
			text-align: center;
			color: #ffffff;
			font-size: 13px;
		}
		.main-img{
			width: 20%;
			height: 1rem;
			margin: 0 auto;
			margin-top: 0.2rem;
		}
		.main-img img{
			width: 100%;
			height: 100%;
		}
		@media screen and (max-width: 1150px) {
			.list{
				width: 100%;
				font-size: 14px;
			}
			.main-button{
				width: 100%;
				margin: 0 auto;
				margin-top: 0.5rem;
			}
			.main-button div{
				width: 28%;
				height: 0.5rem;
				border-radius: 0.2rem;
				line-height: 0.5rem;
				text-align: center;
				color: #ffffff;
				font-size: 13px;
			}
			.main-img{
				width: 75%;
				height: 3rem;
				margin-top: 0.5rem;
			}
		}
	</style>
</head>
<body>
<div class="main">
	<input type="hidden" id="tid" value="{$orderInfo.tid}">
	<div class="list flex">
		<div>订单号</div>
		<div>{$orderInfo.ordersn}</div>
	</div>
	<div class="list flex">
		<div>收款类型</div>
		<div>{if $orderInfo.zid == 1}微信{elseif $orderInfo.zid == 2}支付宝{else /}银行卡{/if}
		</div>
	</div>
	<div class="list flex">
		<div>收款金额</div>
		<div>{$orderInfo.t_money}</div>
	</div>
	<div class="list flex">
		<div>提交时间</div>
		<div>{$orderInfo.z_createtime}</div>
	</div>
	<div class="list flex">
		<div>状态</div>
		<div style="color: rgb(72, 119, 242)">{if $orderInfo.sid == 1}待匹配{elseif $orderInfo.sid == 2}已匹配{else /}已完成{/if}</div>
	</div>
	{if $orderInfo.sid == 1}

	{elseif $orderInfo.sid == 2}
	{if $orderInfo.zid == 1 || $orderInfo.zid == 2}
	<div class="main-img">
		<img src="{$payinfo.q_picture}" >
	</div>
	{else /}
	<div class="list flex">
		<div>持卡人</div>
		<div>{$payinfo.b_username}</div>
	</div>
	<div class="list flex">
		<div>银行卡账号</div>
		<div>{$payinfo.b_card}</div>
	</div>
	{/if}
	<div class="main-button flex">
		<div class="main-button-cancel" onclick="confirm('2')">取消</div>
		<div class="main-button-confirm" onclick="confirm('1')">确定</div>
	</div>
	{else /}

	{/if}


</div>
<script type="text/javascript" src="__STATIC__/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/layer/2.3/layer.js"></script>
<script>
	function confirm(type) {
		var tid = $("#tid").val();
		$.ajax({
			url:"{:url('Index/order_check')}",
			data:{type:type,tid:tid},
			dataType:'json',
			type:'post',
			success:function(data){
				if(data.code == 1){
					layer.msg(data.msg);
					setTimeout(function () {
						window.location.reload();
					},3000)
				}else{
					layer.msg(data.msg);
				}
			}
		})
	}
</script>
</body>
</html>